<template>
  <div class="project-dialog">
    <el-dialog
      :style="`--el-dialog-width:${configModel.width}%; height:${configModel.height}`"
      :model-value="drawerVisible"
      :destroy-on-close="true"
      :title="configModel.title"
      :append-to-body="true"
      width="74%"
      draggable
      :class="`project-info-dialog ${className}`"
      :close-on-click-modal="false"
      @closed="handleClose"
      @close="handleClose"
      @paste="handlePaste"
      :align-center="true"
    >
      <el-form
        v-if="!configModel.show"
        ref="ruleFormRef"
        label-width="100px"
        label-suffix=" :"
        :rules="configOrigan.rules"
        :model="configOrigan.formData"
        v-bind="{ ...configOrigan.attribute }"
        label-position="top"
        class="mt20"
      >
        <div class="info-form">
          <el-form-item
            v-bind="{ ...item.formItemAttribute }"
            :prop="item.key"
            v-for="(item, index) in configModel.column"
            :key="item.key + '_' + index"
          >
            <Upload
              v-if="item.type === 'file'"
              v-bind="{ ...item.attributes }"
              v-model:file-list="configOrigan.formData[item.key]"
              :clipboard-data="clipboardDataList"
              @change="item.attributes?.change"
            />
            <UploadSlice
              v-if="item.type === 'fileSlice'"
              v-bind="{ ...item.attributes }"
              v-model:file="configOrigan.formData[item.key]"
              :clipboard-data="clipboardDataList"
              @success="item.attributes?.success"
              @change="item.attributes?.change"
            />
            <div class="group" v-else-if="item.type === 'group'">
              <div class="group-title" v-if="item.title">{{ item.title }}</div>
              <div
                class="group-wrap"
                :style="item.layout === 'grid' ? `display:grid;grid-template-columns: repeat(${item.len}, minmax(0, 1fr)); ` : ''"
              >
                <!-- overflow: hidden -->
                <div style="flex: 1; width: 100%" v-for="itm in item.list.filter(im => !im.isHidden)" :key="itm.key + 'group'">
                  <slot v-if="itm.type === 'slotVerify'" :name="`${itm.key}`" :scope="configOrigan.formData"></slot>
                  <el-form-item v-bind="{ ...itm.formItemAttribute }" :prop="itm.key" v-else>
                    <Upload
                      v-if="itm.type === 'file'"
                      v-bind="{ ...itm.attributes }"
                      v-model:file-list="configOrigan.formData[itm.key]"
                      :clipboard-data="clipboardDataList"
                      @change="itm.attributes?.change"
                    >
                      <slot :name="`${itm.key}`" :scope="configOrigan.formData"></slot>
                    </Upload>
                    <UploadSlice
                      v-else-if="itm.type === 'fileSlice'"
                      v-bind="{ ...itm.attributes }"
                      v-model:file="configOrigan.formData[itm.key]"
                      :clipboard-data="clipboardDataList"
                      @success="itm.attributes?.success"
                      @change="itm.attributes?.change"
                    />
                    <slot v-else-if="itm.type === 'slot'" :name="`${itm.key}`" :scope="configOrigan.formData"></slot>
                    <component
                      v-else
                      :is="'el-' + itm.type"
                      v-bind="{ ...itm.attributes }"
                      v-model="configOrigan.formData[itm.key]"
                      :ref="
                        (el: any) => {
                          itm.$ref = el;
                        }
                      "
                      @change="
                        (val: any) => {
                          if (typeof itm.attributes?.changeFn === 'function')
                            itm.attributes?.changeFn(val, configOrigan, configModel, itm.$ref);
                        }
                      "
                    >
                      <!-- TODO: 不知为啥 -->
                      <template v-if="itm.type === 'cascader'" #default="{ data }">
                        <span>{{ data.name }}</span>
                      </template>

                      <template v-if="itm.type === 'select'">
                        <component
                          :is="`el-option`"
                          v-for="(col, idx) in itm.attributes.options"
                          :key="idx + '_'"
                          :label="col[itm?.fieldNames?.label] || col['name']"
                          :value="col[itm?.fieldNames?.value] || col['id']"
                        ></component>
                      </template>
                      <slot v-else></slot>
                    </component>
                  </el-form-item>
                </div>
              </div>
            </div>
            <slot v-else-if="item.type === 'slot'" :name="`${item.key}`" :scope="configOrigan.formData"></slot>
            <component v-else :is="'el-' + item.type" v-bind="{ ...item.attributes }" v-model="configOrigan.formData[item.key]">
              <!-- TODO: 不知为啥 -->
              <template v-if="item.type === 'cascader'" #default="{ data }">
                <span>{{ data.name }}</span>
              </template>
              <template v-if="item.type === 'select'">
                <component
                  :is="`el-option`"
                  v-for="(col, idx) in item.attributes.options"
                  :key="idx + '_'"
                  :label="col[item?.fieldNames?.label] || col['name']"
                  :value="col[item?.fieldNames?.value] || col['id']"
                ></component>
              </template>
            </component>
          </el-form-item>
        </div>
      </el-form>
      <div v-else v-for="(item, index) in configModel.column" :key="'group_' + index">
        <div class="group mt30 pl24 pr24 group-content">
          <div class="group-title mb20" v-if="item.title">{{ item.title }}</div>
          <div
            class="group-wrap"
            :style="item.layout === 'grid' ? `display:grid;grid-template-columns: repeat(${item.len}, minmax(0, 1fr));` : ''"
          >
            <div
              style="display: flex; flex: 1; flex-flow: column nowrap; height: 100%"
              v-for="itm in item.list"
              :key="itm.key + 'group'"
            >
              <div class="mb20 ft14 title" style="color: rgb(153 153 153 / 100%)">{{ itm.title }}</div>
              <div class="ft14 text" style="color: rgb(51 51 51 / 100%)">{{ itm.value }}</div>
            </div>
          </div>
        </div>
      </div>

      <template #footer v-if="!configModel.show">
        <el-button @click="handleClose" type="text"> 取消 </el-button>
        <el-button v-if="!configOrigan?.attribute?.disabled" @click="handleSubmit" type="primary"> 确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue"; // computed
import { ElMessage, ElDialog, ElButton, ElFormItem, ElForm } from "element-plus";
import Upload from "@/components/Upload/upload.vue";
import UploadSlice from "@/components/Upload/UploadSlice.vue";
const emits = defineEmits(["update:config", "update:drawer-visible", "change"]);
// 初始化数据
const props = defineProps({
  drawerVisible: { type: Boolean, default: false },
  projectId: { type: String, default: "" },
  closeCallback: { type: Function, default: () => {} },
  successCallback: { type: Function, default: () => {} },
  config: { type: Object, default: () => {} },
  className: { type: String, default: "" }
});
let clipboardDataList = ref<any>([]);

const configModel = computed({
  get: () => props.config,
  set: val => {
    emits("update:config", val);
  }
});
// const configModel = computed defineModel("config", {
//   type: Object,
//   default: () => {}
// });
// console.log(configModel.value);

const configOrigan = configModel.value?.form;

// computed
// const configOrigan = computed(() => {
//   return props.config?.form;
// });
const ruleFormRef = ref<any>(null);
// 方法
const handleClose = () => {
  emits("update:drawer-visible", false);
  props.closeCallback();
};
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      const params = configModel.value.transformData
        ? configModel.value.transformData(JSON.parse(JSON.stringify(configOrigan.formData)))
        : configOrigan.formData;
      await configModel.value.api(params);
      ElMessage.success({ message: configModel.value.message });
      emits("change", true);
      props.successCallback && props.successCallback();
      handleClose();
    } catch (error) {
      console.log(error);
    }
  });
};
// 复制
const handlePaste = (e: any) => {
  console.log(e);
  // 判断是否有上传文件(目前只过滤一级)
  if (
    !configModel.value.column?.find(
      (item: any) => item.type === "file" || !(item.list && item.list.find((item: any) => item.type === "file"))
    )
  )
    return;
  const clipboardData = e.clipboardData;
  if (!Array.from(clipboardData.files).length) return;
  clipboardDataList.value = clipboardData.files;
};
</script>
<style lang="scss">
.project-info-dialog {
  --el-dialog-padding-primary: 0;
  --el-fill-color-blank: #f5f7fa;
  display: flex;
  flex-flow: column nowrap;
  .el-dialog__header {
    display: block !important;
    margin-bottom: 0 !important;
    padding: 16px;
    flex: 0 0 57px;
    box-sizing: border-box;
    .el-dialog__title {
      font-weight: bold;
    }
  }
  .info-container {
    height: 580px;
  }
  .info-form {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
  }
  .el-select,
  .el-cascader,
  .el-input-number,
  .el-date-editor {
    width: 100%;
    .el-input__inner {
      text-align: left;
    }
  }
  .all-h {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-gap: 0 30px;
    width: 100%;
    .el-select,
    .el-cascader,
    .el-input-number,
    .el-date-editor {
      width: 100%;
    }
  }
  .fan {
    .title {
      margin-bottom: 10px;
    }
    .table {
      margin-bottom: 20px;
    }
  }
  .title {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
  }
  .form-item {
    margin: 0;
  }
  .group {
    width: 100%;
  }
  .group-title {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 30px;
  }
  .group-content {
    box-sizing: border-box;
  }
  .group-wrap {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    .el-form-item {
      flex: 1;
      &[label-positions="right"] {
        display: flex;
        flex: 1;
        align-items: center;
        .el-form-item__label {
          width: 120px;
          margin-bottom: 0;
          text-align: left;
        }
      }
    }
    .title {
      flex: 0 0 24px;
    }
    .text {
      flex: 1;
    }
  }
  .common-tr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .flag {
      width: 32px;
      height: 32px;
      margin-right: 10px;
      .user-default {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        border: 1px dashed #cccccc;
        border-radius: 50%;
      }
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
  .el-dialog__footer {
    padding: 16px 16px;
    flex: 0 0 64px;
    box-sizing: border-box;
  }
  .el-dialog__body {
    height: 100%;
    flex: 1;
    overflow: auto;
    padding: 0 20px;
    .el-scrollbar {
      padding: 0px 16px 0;
      .el-form-item__label {
        line-height: 32px;
        margin-bottom: 10px;
      }
    }
    // padding: calc(var(--el-dialog-padding-primary) + 10px) var(--el-dialog-padding-primary) !important;
  }
}
</style>
